<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>UGame</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.raty.min.js"></script>
    <link rel="stylesheet" href="css/style.css" type="text/css"/>
    <link rel="stylesheet" href="css/store.css" type="text/css"/>
</head>
<body>
<div id="wrapper">
<div id="header">
    <img id="dragon" src="images/dragon.png" alt="">

    <div id="logo-panel">
        <img id="logo" src="images/logo.png" alt="">
        <a href="#" id="vn" class="flag-lang"></a>
        <a href="#" id="us" class="flag-lang"></a>
    </div>
    <!-- End #logo-panel -->
    <div id="search-panel">
        <div id="search-bar">
            <div class="left-search">

            </div>
            <!-- End .left-search -->
            <div class="center-search">
                <input type="text" id="search-content"/>
            </div>
            <!-- End .center-search -->
            <div class="right-search">
                <a id="cancel-search" href="#"></a>
                <a id="submit-search" href="#">Search</a>
            </div>
            <!-- End .right-search -->
        </div>
        <!-- End #search-bar -->
        <div id="login-panel">
            <a href="#">Sign up</a> | <a href="#">Sign in</a>
        </div>
        <!-- End account-nav -->
    </div>
    <!-- End #search-panel -->
    <div id="main-nav">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td><a href="#">News</a></td>
                <td class="active"><a href="#">Store</a></td>
                <td><a href="#">Forum</a></td>
            </tr>
        </table>
    </div>
    <!-- End #main-nav -->
</div>
<!-- End #header -->

<div id="main">
    <div id="advertising">
        <img src="images/ads.png" alt="">
    </div><!-- End #advertising -->
    <div id="main-content">
        <div class="item">
            <div class="status status-hot">

            </div>
            <!-- End .status -->
            <img class="game-icon" src="images/game_icon.png" alt="">

            <div class="content">
                <h4>Pikachu</h4>

                <p>Lượt tải: 22.990 | Cập nhật: 12/6/2012</p>

                <div class="star"></div>
                <span>403 Ratings</span>
            </div>
            <!-- End .content -->
            <div class="action">
                <p class="price k5">5.000đ</p>
                <a href="#" class="btn-action info"></a>
                <a href="#" class="btn-action download"></a>
            </div>
            <!-- End .action -->
        </div>
        <!-- End .item -->
        <div class="item alternate-item">
            <div class="status status">

            </div>
            <!-- End .status -->
            <img class="game-icon" src="images/game_icon.png" alt="">

            <div class="content">
                <h4>Pikachu</h4>

                <p>Lượt tải: 22.990 | Cập nhật: 12/6/2012</p>

                <div class="star"></div>
                <span>403 Ratings</span>
            </div>
            <!-- End .content -->
            <div class="action">
                <p class="price k10">10.000đ</p>
                <a href="#" class="btn-action info"></a>
                <a href="#" class="btn-action download"></a>
            </div>
            <!-- End .action -->
        </div>
        <!-- End .item -->
        <div class="item">
            <div class="status status-new">

            </div>
            <!-- End .status -->
            <img class="game-icon" src="images/game_icon.png" alt="">

            <div class="content">
                <h4>Pikachu</h4>

                <p>Lượt tải: 22.990 | Cập nhật: 12/6/2012</p>

                <div class="star"></div>
                <span>403 Ratings</span>
            </div>
            <!-- End .content -->
            <div class="action">
                <p class="price k15">15.000đ</p>
                <a href="#" class="btn-action info"></a>
                <a href="#" class="btn-action download"></a>
            </div>
            <!-- End .action -->
        </div>
        <!-- End .item -->
        <div class="item alternate-item">
            <div class="status status">

            </div>
            <!-- End .status -->
            <img class="game-icon" src="images/game_icon.png" alt="">

            <div class="content">
                <h4>Pikachu</h4>

                <p>Lượt tải: 22.990 | Cập nhật: 12/6/2012</p>

                <div class="star"></div>
                <span>403 Ratings</span>
            </div>
            <!-- End .content -->
            <div class="action">
                <p class="price k10">10.000đ</p>
                <a href="#" class="btn-action info"></a>
                <a href="#" class="btn-action download"></a>
            </div>
            <!-- End .action -->
        </div>
        <!-- End .item -->
        <div class="item">
            <div class="status status-new">

            </div>
            <!-- End .status -->
            <img class="game-icon" src="images/game_icon.png" alt="">

            <div class="content">
                <h4>Pikachu</h4>

                <p>Lượt tải: 22.990 | Cập nhật: 12/6/2012</p>

                <div class="star"></div>
                <span>403 Ratings</span>
            </div>
            <!-- End .content -->
            <div class="action">
                <p class="price k15">15.000đ</p>
                <a href="#" class="btn-action info"></a>
                <a href="#" class="btn-action download"></a>
            </div>
            <!-- End .action -->
        </div>
        <!-- End .item -->
    </div>
    <!-- End #main-content -->
    <div id="category-nav">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td><a href="#" onclick="return false;" id="category">Categories</a></td>
                <td><a href="#">Top new</a></td>
                <td><a href="#">Top rate</a></td>
                <td><a href="#">Hot<span class="hot">!</span></a></td>
            </tr>
        </table>
    </div>
    <!-- End #category-nav -->
    <div id="category-sub-nav">
        <a href="#">Games</a>
        <a href="#">Apps</a>
        <a href="#">Books</a>
    </div>
    <!-- End #category-sub-nav -->
    <div id="paging">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td><a href="#">First page</a></td>
                <td id="paging-number">
                    <a href="#"><<</a>
                    <a href="#">1</a><span>.</span>
                    <a href="#">2</a><span>.</span>
                    <a href="#">3</a>
                    <a href="#">>></a>
                </td>
                <td><a href="#">Last page</a></td>
            </tr>
        </table>
    </div><!-- End #paging -->
</div>
<!-- End #main -->

<div id="footer">
    <img id="banner" src="images/banner.png" alt="">

    <div id="service-title">
        <p><span>C</span>ustomer
            <span>S</span>ervice</p>
    </div>
    <!-- End #service-title -->
    <div id="service-content">
        <img src="images/ugame_vn.png" alt="">

        <p id="copy-right">POWERED BY trunggt4</p>
        <a href="#" class="service" id="email"></a>
        <a href="#" class="service" id="phone"></a>
    </div>
    <!-- End #service -->
</div>
<!-- End #footer -->

<div class="clear"></div>
</div>
<!-- End #wrapper-->
<script type="text/javascript">
    //Execute the function when window load
    $(window).bind("load", function() {

        //setup the height and position for your sticky footer
        $categoryNav = $("#category-nav");
        $categoryNavSub = $("#category-sub-nav");
        $categoryItem = $("#category");

        positionFooter();

        function positionFooter() {

            $categoryNavSub.hide();

            if ($categoryNavSub.is(':hidden')) {
                $categoryItem.parent().removeClass("active");
            } else {

                $categoryItem.parent().addClass("active");
            }

            var bottom = $("body").height() - ($(window).height() + $(window).scrollTop());
            if (bottom > 247) {
                $categoryNav.css({
                    position: "fixed", bottom: "0px"
                });
            } else {
                $categoryNav.css({
                    position: "absolute", bottom: "50px"
                });
            }
        }

        function categoryItem_Click() {

            var categoryItemWidth = $categoryItem.width() - 1;

            var bottom = $("body").height() - ($(window).height() + $(window).scrollTop());
            if (bottom > 247) {
                $categoryNavSub.css({
                    width:categoryItemWidth + "px",
                    position: "fixed",
                    bottom: "40px"
                });
            } else {
                $categoryNavSub.css({
                    width:categoryItemWidth + "px",
                    position: "absolute",
                    bottom: "90px"
                });
            }
            if ($categoryNavSub.is(':hidden')) {
                $categoryItem.parent().addClass("active");
            } else {
                $categoryItem.parent().removeClass("active");
            }
            $categoryNavSub.slideToggle("normal");

        }

        $(window).scroll(positionFooter).resize(positionFooter)
        $categoryItem.click(categoryItem_Click);
    });
    $('.star').raty({
        readOnly : true,
        score    : 4,
        size:22
    });
</script>
</body>
</html>